import { Menu } from 'antd';
import { FC } from 'react';
import { useHistory } from 'umi';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';

interface ChildrenType {
  title: string;
  key: string;
  auth: string;
}

interface MenuType {
  title: string;
  key: string;
  icon: any;
  auth: string;
  children?: ChildrenType[];
}
const menuList: MenuType[] = [
  {
    title: '首页',
    key: '/admin/welcome',
    icon: <MailOutlined />,
    auth: '1',
  },
  {
    title: 'UI',
    key: '/admin/ui',
    icon: <AppstoreOutlined />,
    auth: '2',
    children: [
      {
        title: '按钮',
        key: '/admin/ui/buttons',
        auth: '12',
      },
      {
        title: '弹框',
        key: '/admin/ui/modals',
        auth: '13',
      },
      {
        title: 'Loading',
        key: '/admin/ui/loadings',
        auth: '14',
      },
      {
        title: '通知提醒',
        key: '/admin/ui/notification',
        auth: '15',
      },
      {
        title: '全局Message',
        key: '/admin/ui/messages',
        auth: '16',
      },
      {
        title: 'Tab页签',
        key: '/admin/ui/tabs',
        auth: '17',
      },
      {
        title: '图片画廊',
        key: '/admin/ui/gallery',
        auth: '18',
      },
      {
        title: '轮播图',
        key: '/admin/ui/carousel',
        auth: '19',
      },
    ],
  },
  {
    title: '表单',
    key: '/admin/form',
    icon: <AppstoreOutlined />,
    auth: '3',
    children: [
      {
        title: '登录',
        key: '/admin/form/login',
        auth: '20',
      },
      {
        title: '注册',
        key: '/admin/form/reg',
        auth: '21',
      },
    ],
  },
  {
    title: '表格',
    key: '/admin/table',
    icon: <AppstoreOutlined />,
    auth: '4',
    children: [
      {
        title: '基础表格',
        key: '/admin/table/basic',
        auth: '22',
      },
      {
        title: '高级表格',
        key: '/admin/table/high',
        auth: '23',
      },
    ],
  },
  {
    title: '富文本',
    key: '/admin/rich',
    icon: <AppstoreOutlined />,
    auth: '5',
  },
  {
    title: '城市管理',
    key: '/admin/city',
    icon: <AppstoreOutlined />,
    auth: '6',
  },
  {
    title: '订单管理',
    key: '/admin/order',
    icon: <AppstoreOutlined />,
    auth: '7',
    children: [
      {
        title: '订单详情',
        key: '/admin/order/detail',
        auth: '24',
      },
      {
        title: '结束订单',
        key: '/admin/order/finish',
        auth: '25',
      },
    ],
  },
  {
    title: '员工管理',
    key: '/admin/user',
    icon: <AppstoreOutlined />,
    auth: '8',
  },
  {
    title: '车辆地图',
    key: '/admin/bikeMap',
    icon: <AppstoreOutlined />,
    auth: '9',
  },
  {
    title: '图标',
    key: '/admin/charts',
    icon: <AppstoreOutlined />,
    auth: '10',
  },
  {
    title: '权限设置',
    key: '/admin/permission',
    icon: <MailOutlined />,
    auth: '11',
  },
];

const { SubMenu } = Menu;
const MenuComponnet: FC = () => {
  const history = useHistory();
  const handleClick = (e: any) => {
    console.log(e);
    console.log(history.push(e.key));
  };
  return (
    <Menu onClick={handleClick} mode="vertical" theme="dark">
      {menuList.map((item) => {
        if (item.children) {
          return (
            <SubMenu key={item.key} icon={item.icon} title={item.title}>
              {item.children.map((child) => {
                return <Menu.Item key={child.key}>{child.title}</Menu.Item>;
              })}
            </SubMenu>
          );
        } else {
          return (
            <Menu.Item key={item.key} icon={item.icon}>
              {item.title}
            </Menu.Item>
          );
        }
      })}
    </Menu>
  );
};
export { MenuComponnet };
